<template>
  <view class="Goods">
    <!-- 顶部搜索区域 -->
    <view class="header-search">
      <u-search
        class="header-search-input"
        placeholder="请输入搜索内容"
        v-model="searchName"
        margin="8rpx 30rpx"
        :showAction="false"
      ></u-search>
      <!-- 分类 -->
      <u-tabs
        :list="catList"
        lineColor="#ffbf01"
        :scrollable="false"
        :itemStyle="catListStyle"
        keyName="title"
      >
        <view slot="right" @tap="showMoreCat">
          <u-icon name="list" size="20" bold></u-icon>
        </view>
      </u-tabs>
    </view>
    <!-- 内容区域 -->
    <view class="content-slide-wrap">
      <y-scroll-view
        @scrolltolower="onScrolltoLower"
        v-if="goodsList.length > 0"
      >
        <view class="goods-info-wrap">
          <!-- 控制奇数flex布局 最后一个元素左对齐 使用的盒子 -->
          <view
            class="goods-info-content"
            v-for="(item, index) in goodsList"
            :key="index"
            @click="chooseGoodsHandler(item.id)"
          >
            <view class="goods-info-content-area">
              <!-- 图片区域 -->
              <image :src="item.logo" />
              <!-- 文字区域 -->
              <view class="goods-info-content-goodsname">
                <p>{{ item.title }}</p>
                <p>￥{{ item.market_price }}</p>
              </view>
            </view>
          </view>
        </view>
        <!-- 加载更多 -->
        <view class="load-more">
          <u-loadmore
            v-if="showNoMore && goodsList.length > 0"
            marginTop="0"
            :status="loadingType"
          />
        </view>
      </y-scroll-view>
      <u-empty
        v-else
        mode="data"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
      ></u-empty>
    </view>
    <!-- 更多分类 -->
    <u-picker
      :show="moreCat"
      :columns="catListMore"
      :closeOnClickOverlay="true"
      keyName="label"
      @close="closeCatListMore"
      @cancel="closeCatListMore"
      @confirm="chooseCatHandler"
    ></u-picker>
  </view>
</template>

<script>
import pagination from "@/mixins/pagination";
export default {
  mixins: [pagination],
  data() {
    return {
      searchName: "",
      //分类列表
      catList: [],
      catListStyle: { flex: "0", height: "80rpx" },
      //产品列表
      goodsList: [],
      goodsMoreList: [],
      pageNo: 1,
      pageSize: 6,
      type: 1,
      status: "loadmore",
      //更多分类
      moreCat: false,
      catListMore: [
        [
          {
            label: "雪月夜",
            // 其他属性值
            id: 2021,
            // ...
          },
          {
            label: "冷夜雨",
            id: 804,
          },
        ],
      ],
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      uni.showLoading({
        mask: true,
      });
      this.getGoodsList();
      this.getGoodsCates();
      uni.hideLoading();
    },
    //获取分类
    async getGoodsCates() {
      const params = {
        type: 1,
      };
      const res = await this.$api.getCate(params);
      this.catList = res;
    },
    async getGoodsList() {
      //获取当前分页
      const pageNo = this.getPage();
      const { type, pageSize } = this;
      const params = {
        type,
        pageNo,
        pageSize,
      };
      // 获取商品列表
      const { list, total } = await this.$api.getMallList(params);
      //处理分页
      this.handlingPaginatedData({ total, pageSize });
      if (pageNo == 1) {
        this.goodsList = list;
      } else {
        this.goodsMoreList = list;
      }
      this.setMoreData("goodsList", this.goodsMoreList);
      this.unLoading();
    },
    showMoreCat() {
      this.moreCat = true;
    },
    //关闭分类选择器
    closeCatListMore() {
      this.moreCat = false;
    },
    //选择分类
    chooseCatHandler(val) {
      console.log(val);
      this.closeCatListMore();
    },
    //点击产品详情
    chooseGoodsHandler(id) {
      if (id) {
        this.$Router.push({
          name: "goodsInfo",
          query: {
            id,
          },
        });
      } else {
        this.$utils.showToast("参数错误");
      }
    },
    //下拉加载
    onScrolltoLower() {
      this.pullupLoading("getGoodsList");
    },
  },
};
</script>

<style lang="scss" scoped>
.Goods {
  .header-search {
    padding-bottom: 12rpx;
    box-shadow: 0 14rpx 14rpx -14rpx #cecece;
    /deep/.u-tabs {
      padding: 0 44rpx;
    }
  }
  .content-slide-wrap {
    height: calc(
      100vh - 100rpx - 74rpx - var(--window-top) - var(--window-bottom)
    );
    .goods-info-wrap {
      display: flex;
      flex-wrap: wrap;
      padding: 30rpx 20rpx;
      .goods-info-content {
        box-sizing: border-box;
        flex: 0 50%;
        .goods-info-content-area:first-child {
          margin-right: 8px;
        }
        .goods-info-content-area:last-child {
          margin-left: 8px;
        }
        .goods-info-content-area {
          border-radius: 4px;
          border: 1px solid #eeeeee;
          margin: 0 16px 16px 16px;
          image {
            width: 100%;
            height: 280rpx;
            display: block;
          }
          .goods-info-content-goodsname {
            padding: 0 20rpx;
            padding-top: 20rpx;
            p {
              padding-bottom: 10rpx;
              font-weight: 600;
            }
            p:last-child {
              color: #ffbf01; //#ff4545;
            }
          }
        }
      }
      .load-more {
        margin: auto;
      }
    }
  }
}
</style>
